<body>

<div class="warp h">
    <!--header-->
    <header class="hd br">
        <?php if (!isset($dataFromGet)): ?>
        <a href="<?php echo $base_url; ?>home/address" class="l-icon only-icon">
            <?php else: ?>
            <a href="<?php echo $base_url; ?>home/address?data=<?php echo urlencode($dataFromGet); ?>"
               class="l-icon only-icon">
                <?php endif; ?>
                <i class="iconfont icon-left1"></i>
            </a>
            <p class="tit2">
                <?php echo $title; ?>
            </p>

    </header>
    <ul class="msg-bar">
        <li>
            <span class="l">收货人</span>
            <input type="text" class="input_txt" id="consignee">
        </li>
        <li>

            <span class="l">联系电话</span>
            <input type="text" class="input_txt" id="mobile">
        </li>
        <li>
            <a id="city">
                <span class="l">所在地区</span>
                <span class="r" id="location"> <span class="txt">请选择</span> <i class=" iconfont icon-left"></i></span>
            </a>
        </li>
        <li class="textarea-bar">
            <textarea placeholder="请填写详细地址，不少于5个字" id="address"></textarea>
        </li>
    </ul>
    <a class="save-btn" id="save">
        保存收货信息
    </a>
    <div class="line-box"></div>
    <div class="pd-box"></div>
</div>
<script src="<?php echo $base_url; ?>static/dist/js/base.js"></script>
<script src="<?php echo $base_url; ?>static/dist/js/lib/picker.min.js"></script>
<script src="<?php echo $base_url; ?>static/js/common.js"></script>
<script>
    // 矫正rem
    function correctrem() {
        var rem_full_width = $("<div id='rem-test' style='width:7.5rem'></div>").appendTo($('body')).width();
        var device_width = Math.min(document.documentElement.clientWidth, 640);
        if (rem_full_width !== device_width) {
            document.documentElement.style.fontSize = (device_width / 7.5) * (device_width / rem_full_width) + 'px';
        }
        $('#rem-test').remove();
    }
    correctrem();
    $(function () {
        $('#save').on('click', function () {
            consignee = $('#consignee').val().trim()
            mobile = $('#mobile').val().trim();
            address = $('#address').val().trim();
            provinceid = $('#location').data('provinceid');
            cityid = $('#location').data('cityid');
            districtid = $('#location').data('districtid');
            if (consignee == '' || mobile == '' || address == '' ||
                provinceid == undefined || cityid == undefined) {
                toastShow('请补全收货地址信息');
                return;
            }
            var mobileReg = new RegExp("^[0-9]*$");
            if (!mobileReg.test(mobile)) {
                toastShow("手机号应为纯数字");
                return;
            }
            if (address.length < 5 || address.length > 30) {
                toastShow('详细地址输入不完整或太长');
                return;
            }
            if (consignee.length < 2 || consignee.length > 15) {
                toastShow('收货人填写错误');
                return;
            }

            if (districtid == undefined) {
                districtid = 0;
            }
            $.ajax({
                url: "<?php echo $base_url; ?>home/address/add",
                data: {
                    consignee: consignee,
                    mobile: mobile,
                    provinceid: provinceid,
                    cityid: cityid,
                    districtid: districtid,
                    address: address
                },
                dataType: 'json',
                type: 'POST',
                success: function (data) {
                    if (data.result == 0) {
                        location.href = "<?php echo $base_url; ?>home/address<?php if (isset($dataFromGet))
                        {
                            echo '?data=' . urlencode($dataFromGet);
                        }?>";
                    } else {
                        toastShow(data.errmsg);
                    }
                }
            });
        });
    });


    function getProvince(cb) {
        $.ajax({
            url: "/home/address/getZonesByID?zoneid=1",
            type: "GET",
            success: function (data) {
                cb(data);
            },
            error: function (xhr, type) {
                console.log('Ajax error');
            }
        })
    }

    function getUrbanDistrict(id, cb) {
        $.ajax({
            url: "/home/address/getZonesByParentID?zoneid=" + id,
            type: "GET",
            success: function (data) {
                cb(data);
            },
            error: function (xhr, type) {
                console.log('Ajax error');
            }
        })
    }


    function formatData(data) {
        var newRes = [];
        for (var i = 0; i < data.length; i++) {
            // console.log(data[i]);
            newRes[i] = {};
            newRes[i].value = data[i].id
            newRes[i].text = data[i].name
        }
        return newRes;
    }

    var picker;

    getProvince(function (data) {
        var provinceData = formatData(JSON.parse(data));

        getUrbanDistrict(provinceData[0].value, function (data) {
            var cityData = formatData(JSON.parse(data));
            getUrbanDistrict(cityData[0].value, function (data) {
                var areaData = formatData(JSON.parse(data));

                picker = new Picker({
                    data: [provinceData, cityData, areaData],
                    selectedIndex: [0, 0, 0],
                    // title: '地址选择'
                });
                picker.on('picker.select', function (selectedVal, selectedIndex) {
                    var province = provinceData[selectedIndex[0]].text;
                    var city = (cityData[selectedIndex[1]] && cityData[selectedIndex[1]].text) || ""
                    var area = (areaData[selectedIndex[2]] && areaData[selectedIndex[2]].text) || ""
                    $("#location").data("provinceid", provinceData[selectedIndex[0]] && provinceData[selectedIndex[0]].value)
                    $("#location").data("cityid", cityData[selectedIndex[1]] && cityData[selectedIndex[1]].value)
                    $("#location").data("districtid", areaData[selectedIndex[2]] && areaData[selectedIndex[2]].value)

                    $("#city").find('.r').html(province + city + area + ' <i class=" iconfont icon-left"></i>');


                });

                picker.on('picker.change', function (index, selectedIndex) {
                    if (index == 0) {
                        var dataID = provinceData[selectedIndex].value;
                        getUrbanDistrict(dataID, function (data) {
                            cityData = formatData(JSON.parse(data));
                            getUrbanDistrict(cityData[0].value, function (data) {
                                areaData = formatData(JSON.parse(data));
                                picker.refillColumn(1, cityData);
                                picker.refillColumn(2, areaData);
                                picker.scrollColumn(1, 0)
                                picker.scrollColumn(2, 0)
                            });
                        })

                    } else if (index == 1) {
                        var dataID = cityData[selectedIndex].value;
                        getUrbanDistrict(dataID, function (data) {
                            areaData = formatData(JSON.parse(data));
                            picker.refillColumn(2, areaData);
                            picker.scrollColumn(2, 0)
                        });
                    }


                });
                // picker.on('picker.valuechange', function (selectedVal, selectedIndex) {
                // 	console.log(selectedVal);
                // 	console.log(selectedIndex);
                // });
            })

        })

    })


    $("#city").on('click', function () {
        picker.show();
    });

</script>

</body>

</html>
